
{% if theme_config.global.product_size == "1" %}
{% assign product_size = "11" %}
{% elsif theme_config.global.product_size == "2" %}
{% assign product_size = "34" %}
{% elsif theme_config.global.product_size == "3" %}
{% assign product_size = "23" %}
{% elsif theme_config.global.product_size == "4" %}
{% assign product_size = "12" %}
{% endif %}



{%- if product.image.alt == "" -%}
    {% assign product_alt = product | image_alt:'product'  %}
{%- else -%}
    {% assign product_alt = product.image.alt %}
{%- endif -%}


{%- if product.images[1].alt == "" -%}
    {% assign product_alt2 = product | image_alt:'product'  %}
{%- else -%}
    {% assign product_alt2 = product.images[1].alt %}
{%- endif -%}

{%- capture text_ellipsis -%}
  {%- if theme_config.global.product_title_style == 'hide' -%}
    text-ellipsis
  {%- elsif theme_config.global.product_title_style == 'hide2' -%}
    text-ellipsis2
  {%- endif -%}
{%- endcapture -%}


{%- capture product_handle -%}
  {% if product.handle and product.handle != "" %}
    {%- if storeConfig.collection_product_url == 1 -%}
      /products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- else -%}
      {%- if collection_handle and collection_handle != "" -%}/collections/{{collection_handle}}{% endif %}/products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
    {%- endif -%}
  {% else %}
    javascript:;
  {%- endif -%}
{%- endcapture -%}
<li class="{{ swiper }}" data-product-id="{{blockId}}-{{product.id}}">

{% comment %} product-exposure data-product-ec-info='{{product | product_data_ec_info | url_encode}}' data-product-ec-list-name="{{hit_type_category}}" data-product-ec-list-position="{{hit_type_value}}" {% endcomment %}
    <div  class="product_pic default_product_pic {% if theme_config.global.product_move_two %}{% if product.images[1].src %}default_product_img_hover{% endif %}{% endif %}">

        <a class="product_img plugin-product_item-img_box" data-product-id="{{product.id}}" data-scale="{{ product_size }}" href="{{product_handle}}">

            {% include 'lazy_img', class:"default_img", src:product.src,  alt:product_alt %}

            {% if theme_config.global.product_move_two %}
            {% if product.images[1].src %}
            <img class="hover_img" data-sizes="auto" data-src="{{ product.images[1].src }}" alt="{{product_alt2}}"  src="{{  'empty_loading.png' | public_asset_abs_url }}">
            {% endif %}
            {% endif %}
        </a>
        {% if product.inventory_tracking and product.inventory_policy == 1 %}
        {% if product.inventory_quantity == "0" %}
            <div class="soldout">{{ lang.general.sold_out }}</div>
        {% endif %}
        {% endif %}

        {% if theme_config.global.product_discount_label and product.variant.price > 0 %} 
        {% if product.variant.price < product.variant.compare_at_price %}
        {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
        {% if price > 0 %}
        <div class="discount_tag {{ theme_config.global.discount_label_style }}"><div class="discount_tag_graphics"></div><div class="discount_tag_name">{{ price }}% <span>OFF</span></div></div>
        {% endif %} 
        {% endif %}
        {% endif %}
        <div class="product_tag_list">
            {% if theme_config.global.product_preview %}
            <a class="product_view product_quick-mobile-view" data-handle="{{ product.handle }}" data-from="{{data_from}}" href="javascript:void(0)">
                <svg t="1679549187129" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5175" width="20" height="20">
                    <path fill="#ffffff" d="M512 307.2a387.072 387.072 0 0 0-350.3104 223.3344 387.072 387.072 0 0 0 350.3104 223.3344 387.072 387.072 0 0 0 350.3104-223.3344A387.072 387.072 0 0 0 512 307.2m0-102.4a488.7552 488.7552 0 0 1 460.8 325.7344 488.7552 488.7552 0 0 1-460.8 325.7344 488.7552 488.7552 0 0 1-460.8-325.7344 488.7552 488.7552 0 0 1 460.8-325.7344z" p-id="5176"></path>
                    <path d="M512 512m-102.4 0a102.4 102.4 0 1 0 204.8 0 102.4 102.4 0 1 0-204.8 0Z" fill="#ffffff" p-id="5177"></path>
                </svg>
            </a>
            {% endif %}
        </div>
    </div>


    <div class="block_product_name {% unless theme_config.global.product_title_model %}wap_hide{% endunless %}">
        <a class="{{ text_ellipsis }}" href="{{product_handle}}">{{ product.highlight_title | default : product.title }}</a>
    </div>
    <div class="product_price">
        <span class="general_buying-color">{{ product.variant.price | money }}</span>
        {% if product.variant.compare_at_price != "0" %}
            <span class="product_oldprice general_original-color">{{ product.variant.compare_at_price | money }}</span>
        {% endif %}
    </div>

    {% if theme_config.global.product_discount_label_style_switch and product.variant.price > 0 %} 
    {% if product.variant.price < product.variant.compare_at_price %}
    <div class="product_price" style='color:var(--discount_tag_bg);margin-top: 4px;'>
        {{lang.general.save}}
        {% if theme_config.global.product_discount_label_style == 2 %}
        {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
        {{price}}%
        {% else %}
        {% assign price = product.variant.compare_at_price | minus: product.variant.price | round: 2  %}
        {{price | money}}  
        {% endif %}
    </div>
    {% endif %}
    {% endif %}

    {% include 'comment_star', score:product.star, style:"margin-top:10px" %}
    {% if theme_config.global.product_img_list_type != 0 %}
    <div class="block_product_img_list noRender">
        <div class="img_list" style="display: flex;justify-content: center;">
       {% if theme_config.global.product_img_list_type == "1" %}
        {% assign colorOptions = theme_config.global.product_sku_options | join: ',' | downcase | split: ',' %}
        {% assign isFindSuccess = false %}
        {% if product.variants.size > 0 %}
            {% for option in product.options %}
                {% assign option_name = option.name | downcase %}
                {% assign hasOptionName = option_name | in_array: colorOptions %}
                {% if hasOptionName and isFindSuccess == false %}
                    {% assign isFindSuccess = true %}
                    {% assign optionIndex = option.position | plus: 1 %}
                    {% assign optionTitle = "option" | append: optionIndex | append: "_title" %}
                    {% assign optionValueTitle = "option" | append: optionIndex | append: "_value_title" %}
                    {% assign optionValues = "" %}
                    {% assign isSelectOptions = "" %}
                    
                    {% for optionValueItem in option.values %}
                           {% assign optionValues = optionValues | append: optionValueItem.option_value | append: ',' %}
                    {% endfor %}
                    {% for variant in product.variants %}
                        {% assign varinatTitle = variant | getArrayValueByKey: optionTitle | downcase %}
                        {% assign variantValue = variant | getArrayValueByKey: optionValueTitle | downcase %}
                        {% assign hasVarinatTitle = colorOptions contains varinatTitle %}
                        {% assign hasValue = optionValues contains variantValue %}
                        
                        {% if hasVarinatTitle != '' and  hasValue != '' %}
                            {% unless isSelectOptions contains variantValue %}
                                {% if variant.image %}
                                    {% assign isSelectOptions = isSelectOptions | append: variantValue | append: ',' %}
                                    <a href="{{ product_handle | append: "&variant_sku_code=" | append: variant.sku_code }}" class="img_list_item"><img  data-src="{{ variant.image.src }}" src="{{  'empty_loading.png' | public_asset_abs_url }}"></a>
                                {% endif %}
                            {% endunless %}
                        {% endif %}
                    {% endfor %}
                    
                {% endif %}
            {% endfor %}
        {% endif %}

       {% elsif theme_config.global.product_img_list_type == "2" %}
        {% if product.variants.size > 0 %}
            {% for imgsItem in product.images %}
                <a href="{{ product_handle }}" class="img_list_item"><img  data-src="{{ imgsItem.src }}" src="{{  'empty_loading.png' | public_asset_abs_url }}"></a>
            {% endfor %}
        {% endif %}
       {% endif %}
       <div class="morNumber"></div>
       </div>
    </div>
    {% endif %}
</li>